import React from 'react'
import ReactDOM from 'react-dom';
import { HashRouter as Router,Route,Switch } from 'react-router-dom'
import store from './store/index'
import 'antd-mobile/dist/antd-mobile.css';
import { TabBar} from 'antd-mobile';
import { Provider } from 'react-redux';
import Tabs1 from './components/tab1'
import Tabs2 from './components/tab2'
import Tabs3 from './components/tab3'
import Tabs4 from './components/tab4'
import Cart from './components/Cart'
import Comment from './components/Comment'
import TabDetail from './components/TabDetail'
import LoginRegister from './components/LoginRegister'
import HomeSvg from './assets/home.svg'
import NewsSvg from './assets/news.svg'
import ProductSvg from './assets/product.svg'
import MineSvg from './assets/mine.svg'
import HomeSvg1 from './assets/home(1).svg'
import NewsSvg1 from './assets/news(1).svg'
import ProductSvg1 from './assets/product(1).svg'
import MineSvg1 from './assets/mine (1).svg'
export default class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: true,
    };
  }

  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
        <Switch>
            <Route path="/home" component={Tabs1}/>
            <Route path="/product" component={Tabs2} exact/>
            <Route path="/product/:id" component={TabDetail} exact/>
            <Route path="/product/:id/cart" component={Cart}/>
            <Route path="/news" component={Tabs3} exact/>
            <Route path="/news/comment" component={Comment}/>
            <Route path="/mine" component={Tabs4} exact/>
            <Route path="/mine/loginregister" component={LoginRegister}/>
            <Route  component={Tabs1}/>
        </Switch>
      </div>
    );
  }
  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', bottom:'0'}}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={false}
          tabBarPosition="bottom"
        >
          <TabBar.Item
            title="首页"
            key="Home"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${HomeSvg}) center center /  21px 21px no-repeat` }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${HomeSvg1}) center center /  21px 21px no-repeat` }}
            />
            }
            selected={this.state.selectedTab === 'homeTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'homeTab',
              },()=>{
                  this.props.history.push('/home')
              });
            }}
            data-seed="logId"
          >
            {this.renderContent('Home')}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${ProductSvg}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${ProductSvg1}) center center /  21px 21px no-repeat` }}
              />
            }
            title="产品"
            key="Product"
            selected={this.state.selectedTab === 'ProductTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'ProductTab',
              },()=>{
                  this.props.history.push('/product')
              });
            }}
            data-seed="logId1"
          >
            {this.renderContent('Product')}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${NewsSvg}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${NewsSvg1}) center center /  21px 21px no-repeat` }}
              />
            }
            title="新闻"
            key="News"
            selected={this.state.selectedTab === 'newsTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'newsTab',
              },()=>{
                  this.props.history.push('/news')
              });
            }}
          >
            {this.renderContent('News')}
          </TabBar.Item>
          <TabBar.Item
          icon={
            <div style={{
              width: '22px',
              height: '22px',
              background: `url(${MineSvg}) center center /  21px 21px no-repeat` }}
            />
          }
          selectedIcon={
            <div style={{
              width: '22px',
              height: '22px',
              background: `url(${MineSvg1}) center center /  21px 21px no-repeat` }}
            />
          }
            title="我的"
            key="Mine"
            selected={this.state.selectedTab === 'MineTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'MineTab',
                },()=>{
                    this.props.history.push('/mine')
                });
            }}
          >
            {this.renderContent('Mine')}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
class Index extends React.Component{
  render(){
      return (
          <Provider store={store}>
              <Router>
                  <div>
                      <Switch>
                          <Route path="/" component={TabBarExample} />
                      </Switch>
                  </div>
              </Router>
          </Provider>
      )
  }
}
ReactDOM.render(<Index/>,document.getElementById('app'));